import './index.scss';
import store from "../../../store";//哪个组件需要用到store的数据就在哪个组件引入
import { observer } from 'mobx-react'  //观察者,被它所包裹的组件就是响应式的，改了数据页面就会更新
import { Button, Space, Modal, Form, Input, Select, Radio, Upload, Table, message } from 'antd';
import React, { useState, useRef, useEffect} from 'react'; 
const { Option } = Select;

//解构出子模块
const { Author } = store;

const AuthorManagement = () => {
    const [isAddOpen, setisAddOpen] = useState(false);//新增模态框setisEditOpen
    const [isEditOpen, setisEditOpen] = useState(false);//编辑模态框
    //新增弹框中选择图片
    const [img, setImg] = useState();
    //编辑弹框中选择图片
    const [editImg,setEditImg] = useState();
    // 新增模态框，存储上传后的图片的路径
    const [newImgFile,setNewImgFile]=useState({})
    // 编辑模态框，存储上传后的图片的路径
    const [imgFile,setImgFile]=useState({})
    //上传图片
    const file = useRef(null)
    

    // 多条件查询
    const [queryform] = Form.useForm();
    // 编辑作者
    const [editform] = Form.useForm();
    
    //获取表格数据
    useEffect(() => {
        if (Author.authordata.length === 0) {
            Author.getAllauthor(1)
        }
    }, [])
    const columns = [
        {
            title: '编号',//表格列名
            dataIndex: 'id',//对应数据字段
            key: 'id',//该列的唯一值
        },
        {
            title: '头像',
            dataIndex: 'headPortrait',
            key: 'headPortrait',
            render: (record) => {
                // console.log(record);
                return <img src={record} width="50px" alt="" />
            }
        },
        {
            title: '姓名',
            dataIndex: 'writerName',
            key: 'writerName',
        },
        {
            title: '状态',
            key: 'state',
            render: (text) => {
                // console.log(text.type)
                return <span>{text.state}</span>
            }
        },
        {
            title: '录入时间',
            dataIndex: 'enterTime',
            key: 'enterTime',
        },
        {
            title: '操作',
            render: (_, record) => (
                <Button type={"link"} onClick={() => { EditAuthor(record) }}>编辑</Button>
            )

        },
    ];
    //------------------------------------------多条件查询-----------------
    const onFinish = (values) => {
        console.log('查询 ', values);
    };
    
    const submit = () => {
        const a = queryform.getFieldsValue(true)
        console.log(a)
        // 发起查询请求
        Author.getQueryauthor(a)
    };
    const onReset = () => {
        //多条件查询表单重置清除表单内容并且重新获取一次表格数据
        Author.getAllauthor(1)
        queryform.resetFields();
    };

    //----------------------新增模态框--------------------
    const [addform]=Form.useForm();
    const [flag,setFlag]=useState(true)
    const onaddFinish = () => {
        // setFlag(true)
    }
    const onaddFinishFailed = () => {
        // setFlag(false)
        message.warning('请填写必要信息后保存!')
    }
    const addAuthor = () => {
        console.log('新增')
        setisAddOpen(true);
    }
    const AddOk = () => {
        console.log("模态框确认")
        var myDate = new Date();
        var thisDate = myDate.getFullYear()+"-"+(myDate.getMonth()+1)+"-"+myDate.getDate()+' '+myDate.toLocaleTimeString();
        const addData={...addform.getFieldsValue(),enterTime:thisDate}
        console.log("新增图片文件名",newImgFile)
        // 图片上传的逻辑为：不在选择图片时就发起图片上传请求，而是在提交表单时先去发起图片上传请求，带参为图片文件名、表单数据、操作类型。后在store中的图片上传的函数中去判断是编辑还是新增，然后去发起对应的修改请求
        //发送图片添加请求，同时将新增表单数据传入
        Author.addAuthorImage(newImgFile,addData,'新增')
        // if(flag===true){
        //     addform.resetFields();
        //     setisAddOpen(false);
        // }
        addform.resetFields();
        setisAddOpen(false);
        
    };
    const AddCancel = () => {
        console.log("取消")
        setImg();
        addform.resetFields();
        setisAddOpen(false);
    };
    //------------------------冻结确认模态框------------
    const freezeAuthor = () => {
        console.log('冻结');
        if (Author.selectAuthors.length === 0) {
            return message.warn('请选择要冻结的作者！')
        }
        Modal.confirm({
            title: `确认冻结选中的${Author.selectAuthors.length}位作者吗？`,
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
                Author.editAuthorState(Author.selectAuthorsID,"冻结");
                message.success('冻结成功！')
            },
            onCancel: () => {
                message.info('已取消冻结')
            }
        })
    }
    //------------------------解冻确认模态框-----------------
    const thawAuthor = () => {
        console.log('解冻');
        if (Author.selectAuthors.length === 0) {
            return message.warn('请选择要解冻的作者！')
        }
        Modal.confirm({
            title: `确认解冻选中的${Author.selectAuthors.length}位作者吗？`,
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
                Author.editAuthorState(Author.selectAuthorsID,"正常");
                message.success('解冻用户成功！')
            },
            onCancel: () => {
                message.info('已取消解冻用户')
            }
        })
    }
    //------------------------删除确认模态框------------------
    const delAuthor = () => {
        console.log('删除');
        if(Author.selectAuthors.length === 0){
            return message.warn('请选择要删除的作者！')
        }
        Modal.confirm({
            title: `确认删除选中的${Author.selectAuthors.length}位作者吗？`,
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
                Author.delAuthor(Author.selectAuthorsID);
                message.success('删除用户成功！')
            },
            onCancel: () => {
                message.info('已取消删除用户')
            }
        })
    }
    //------------------------编辑----------------------------
    // 用于存储编辑行的完整数据
    const [editData,setEditData]=useState();
    // 编辑点击事件
    const EditAuthor = (val) => {
        console.log("编辑项数据", val);
        // 存储编辑行的完整数据
        setEditData(val);
        // 图片路径
        setEditImg(val.headPortrait)
        // 回显数据到编辑模态框中的表单
        editform.setFieldsValue(val);
        // 打开编辑模态框
        setisEditOpen(true);
    }

    const EditOk = () => {
        console.log("编辑模态框确认")
        console.log("编辑后的表单数据",editform.getFieldsValue());
        console.log("图片地址",imgFile);
        // 将修改前的完整数据与修改的部分数据组合
        const newdata={...editData,...editform.getFieldsValue()}
        console.log("组合后的数据",newdata);
        newdata.headPortrait=editImg;
        console.log("将图片路径设置为路由带参时的路径",newdata);
        // 图片上传的逻辑为：不在选择图片时就发起图片上传请求，而是在提交表单时先去发起图片上传请求，带参为图片文件名、表单数据、操作类型。后在store中的图片上传的函数中去判断是编辑还是新增，然后去发起对应的修改请求
        Author.addAuthorImage(imgFile,newdata,'编辑')
        setisEditOpen(false);
        editform.resetFields();

    };
    const EditCancel = () => {
        console.log("编辑模态框取消")
        setisEditOpen(false);
        editform.resetFields();
    };

    //-------------------------上传头像handler
    const uploadFile = (e) => {
        const fileData = e.target.files[0];
        console.log(fileData)
        if(isAddOpen){
            console.log("1111新增模态框设置图片文件名11111")
            setNewImgFile(fileData)
        }
        if(isEditOpen){
            console.log("222编辑模态框设置图片文件名2222")
            setImgFile(fileData) 
        }
        const pattern = /^image/;
        if (!pattern.test(fileData.type)) {
            message.error("图片格式不正确")
            return
        }
        const reader = new FileReader()
        reader.readAsDataURL(fileData)
        reader.onload = () => {
            // 新增弹框
            if(isAddOpen){
             setImg(reader.result)   
            }
            // 编辑弹框
            if(isEditOpen){
                setEditImg(reader.result)   
               }
            
        }
    }
    return <div className='authorBigBox'>
        <div className='queryBox'>
            <Form
                form={queryform}
                name='authorform'
                onFinish={onFinish}
                layout="inline"
            >
                <Space size={"middle"}>
                    <Form.Item
                        label="作者姓名"
                        name="writerName"
                    >
                        <Input placeholder='作者姓名' />
                    </Form.Item>
                    <Form.Item
                        label="状态"
                        name="state">
                        <Select style={{ width: 120 }}>
                            <Option value=''>全部</Option>
                            <Option value='正常'>正常</Option>
                            <Option value='冻结'>冻结</Option>
                        </Select>
                    </Form.Item>
                    <Button onClick={onReset} className='btnStyle'>重置</Button>
                    <Button type='primary' onClick={submit} className='btnStyle'>搜索</Button>
                </Space>

            </Form>
        </div>
        {/* --------------------------功能按键--------------------- */}

        <div className='optionBox'>
            <Space size={'large'}>
                <Button type='primary' className='btnStyle' onClick={addAuthor}>新增</Button>
                <Button type='primary' className='btnStyle' onClick={freezeAuthor}>冻结</Button>
                <Button type='primary' className='btnStyle' onClick={thawAuthor}>解冻</Button>
                <Button type='primary' className='btnStyle' onClick={delAuthor}>删除</Button>
            </Space>

        </div>
        {/*-------------------------新增弹框---------------------*/}
        <Modal title="添加作者"
            open={isAddOpen}
            onOk={AddOk}
            onCancel={AddCancel}
            okText="保存"
            cancelText="取消">
            <Form
            form={addform}
                name="addform"
                onFinish={onaddFinish}
                onFinishFailed={onaddFinishFailed}
                labelCol={{ span: 4 }}>
                <Form.Item
                    name='headPortrait'
                    label="头像"
                    rules={[{ required: true, message: '请选择头像' }]}
                >
                    <div>
                        {(() => {
                            // console.log(img)
                            if (img) {
                                return <img
                                    src={img}
                                    alt="avatar"
                                    style={{
                                        width: '60px',
                                        marginRight: '20px'
                                    }} />
                            } else {
                                return ''
                            }
                        })()
                        }
                        <input ref={file} type="file" style={{ display: 'none' }} onChange={(e) => uploadFile(e)} />
                        <Button type={"primary"} onClick={() => {
                            file.current.click()
                        }
                        }>选择头像</Button>
                    </div>
                </Form.Item>
                <Form.Item
                    name="writerName"
                    label="名称"
                    rules={[{ required: true, message: '输入的作者名称不合法', whitespace: true }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="state"
                    label="状态"
                    rules={[
                        {
                            required: true,
                            message: '请选择作者的状态',
                        },
                    ]}
                >
                    <Radio.Group
                        optionType="button"
                        buttonStyle="solid">
                        <Radio.Button value="正常">正常</Radio.Button>
                        <Radio.Button value="冻结">冻结</Radio.Button>
                    </Radio.Group>
                </Form.Item>
                <Form.Item
                    name="des"
                    label="介绍"
                    rules={[{ required: true, message: '请输入介绍内容' }]}
                >
                    <Input.TextArea showCount maxLength={200} />
                </Form.Item>
            </Form>
        </Modal>
        {/*-------------------------编辑弹框---------------------------*/}
        <Modal title="编辑作者"
            open={isEditOpen}
            onOk={EditOk}
            onCancel={EditCancel}
            okText="保存"
            cancelText="取消"
            destroyOnClose={true}
            getContainer={false}
        >
            <Form
                form={editform}
                name="EditAuthor"
                labelCol={{ span: 4 }}
            >
                <Form.Item
                        name='headPortrait'
                        label="头像"
                        rules={[{ required: true, message: '请选择头像'}]}
                        >
                        <div>
                        {(() => {
                            // console.log(img)
                            if (editImg) {
                                return <img
                                    src={editImg}
                                    alt="avatar"
                                    style={{
                                        width: '60px',
                                        marginRight: '20px'
                                    }} />
                            } else {
                                return ''
                            }
                        })()
                        }
                        <input ref={file} type="file" style={{ display: 'none' }} onChange={(e) => uploadFile(e)} />
                        <Button type={"primary"} onClick={() => {
                            file.current.click()
                        }
                        }>选择头像</Button>
                    </div>
                    </Form.Item>
                <Form.Item
                    name="writerName"
                    label="名称"
                    rules={[{ required: true, message: '输入的作者名称不合法', whitespace: true }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="state"
                    label="状态"
                    rules={[
                        {
                            required: true,
                            message: '请选择作者的状态',
                        },
                    ]}
                >
                    <Radio.Group
                        optionType="button"
                        buttonStyle="solid">
                        <Radio.Button value="正常">正常</Radio.Button>
                        <Radio.Button value="冻结">冻结</Radio.Button>
                    </Radio.Group>
                </Form.Item>
                <Form.Item
                    name="des"
                    label="介绍"
                    rules={[{ required: true, message: '请输入介绍内容' }]}
                >
                    <Input.TextArea showCount maxLength={200} />
                </Form.Item>
            </Form>
        </Modal>

        {/* --------------------------------表格+分页------------------- */}
        <div className='tableBox'>
            <Table
                rowSelection={{
                    type: 'checkbox',
                    onChange(selectedRowKeys, rows) {
                        Author.setSleAuthor(rows)
                        Author.setSleAuthorId(selectedRowKeys)
                        // console.log("批量选中项的id数组",selectedRowKeys);
                    }
                }}
                columns={columns}
                dataSource={Author.authordata}
                rowKey={(record) => record.id}
                pagination={{ pageSize: 5,
                    // pageSizeOptions:[5,6],
                    
                    // onChange(page,pageSize){
                    //     Author.getAllauthor(page)
                    // } 
                }}
                bordered />

        </div>
    </div>
}
export default observer(AuthorManagement);